<template>
	<!-- 分享领券商品列表 -->
	<div class="sTIndex">
		<van-nav-bar
		  title="分享领券"
		  left-text=""
		  fixed
		  left-arrow
		  @click-left="retreat"
		/>
		<div class="sti_box" style="overflow: scroll;" >
			<!-- <div class="sti_box_img">
				<img src="https://image.soole.com.cn/sTIndex.png" alt="">
			</div> -->
			<div class="sti_box_content">
				<div class="sti_module1">
					<div class="sti_module_img top_text">
						<p>今天已送出<span>562400</span>元抵扣券</p>
						<img v-show="!active" src="https://image.soole.com.cn/分享好友领抵扣券.png" alt="">
						<img v-show="active" src="https://image.soole.com.cn/分享好友领购物券.png" alt="">
					</div> 
				</div>
				
				<div class="sti_module2">
					<div class="sti_content">
						<p>每分好友可得抵扣券</p>
						<div class="ski_count">
							<div class="ski_price"><span>￥</span>{{ticketCount}}</div>
							<div class="ski_style">
								<div>
									可消费
								</div>
							</div>
						</div>
						<div class="ski_time">
							{{hms.hours|stringJoints()}}:{{hms.minutes|stringJoints()}}:{{hms.seconds|stringJoints()}}后红包抵扣券将失效
						</div>
					</div>
					<!-- <div class="sti_content">
						<div class="sti_timeout">
							<div>时间已超时</div>
							<div>累计购物券已失效</div>
							<div>请重新分享</div>
						</div>
					</div> -->
					<div class="hdgz" @click="ruleBool = true">活动规则</div>
				</div>
				
				<div class="sti_module3">
					<div class="sti_content">
						<div class="sti_but" @click='clickShare'>
							立即分享
						</div>
						<div class="sti_text">
							<p>累计到200元可到商场消费</p>
						</div>
					</div>
				</div>
				<record v-show="!isStore"></record>	
				<cdList v-show="isStore"></cdList>
				<!-- <cdList></cdList> -->
			</div>	
		</div>
		
		<!-- 弹窗 -->
		<!-- 活动 -->
		<div class="sssss" v-show="ruleBool">
			<rule @cancel = 'cancel'></rule>
		</div>
		<!-- 获得券 -->
		<van-overlay :show="ticketBool">
			<getTicket :addTicket='addTicket' @cancel = 'cancel' @popupFx='popupFx' v-show="isTicket"></getTicket>
			<ATicket @cancel='cancel' @fullTicket="fullTicket" v-show="!isTicket"></ATicket>
		</van-overlay>
		<!-- 分享路径 -->
		<van-popup
		  v-model="shareBool"
		  position="bottom"
		  :style="{ height: '20%' }"
		>
			<div class="fx_path">
				<div class="fx_path_box" @click="FriendsShare">
					<div class="fx_path_img">
						<img src="https://image.soole.com.cn/000518@2x.png" alt="">
					</div>
					<p class="fx_path_text">微信好友</p>
				</div>
				<div class="fx_path_box">
					<div class="fx_path_img">
						<img src="https://image.soole.com.cn/0000513@2x.png" alt="">
					</div>
					<p class="fx_path_text">朋友圈</p>
				</div>
				<div class="fx_path_box">
					<div class="fx_path_img">
						<img src="https://image.soole.com.cn/000517@2x.png" alt="">
					</div>
					<p class="fx_path_text">复制链接</p>
				</div>
			</div>
		</van-popup>
		
	</div>
</template>

<script>
	import rule from './popup/rule';//活动
	import ticket from './popup/indexHint';//弹窗
	import getTicket from './popup/getTicket';//第一次打开页面的送多少钱，以及分享送券提示
	// import indexHint from './popup/indexHint';//满了200券，提示
	import ATicket from './popup/ATicket';//满了200券，提示
	import record from './record';
	import cdList  from '@/pages/activity/shareTicket/cdList';//折扣商品
	
	export default {
		data(){
			return{
				active:0,
				ticketCount:100,//累计票数
				addTicket:10,//添加券
				ruleBool:false,//活动规则bool
				shareBool:false,//分享方式bool
				ticketBool:true,//得到券
				isTicket:true,//检查是否到达200券
				isStore:false,//商城主页切换
				//记时
				hours: "00",
				minutes: "00",
				seconds: "00",
				hms:{
					hours: "00",
					minutes: "00",
					seconds: "00"
				},
				maxtime:3600000*12,
				commodityList:[],
				bool:false,
				pageNumBottom:1,
				allLoaded:false,//是否上拉
				
			}
		},
		watch:{
			"ticketCount":function(newVal,oblVal){
				if(newVal!==0 && newVal%200===0){
					console.log('到200')
					this.isTicket = false;
					return;
				}
				this.isTicket = true;
			}
		},
		mounted() {
			//券添加
			this.ticketCount += this.addTicket;
			this.addTicket = this.ticketCount;
			this.startTimer();//定时器
		},
		created(){
			// this.seckillList();
		},
	  methods: {
	    //后退
	    retreat() {
	    	if (window.history.length <= 1) {
	    		this.$router.push({path:'/'})
	    	} else {
	    		this.$router.go(-1);
	    	}
	    },
		//点击分享
		clickShare(){
			this.shareBool = true;
		},
		//关闭活动规则的弹窗
		cancel(){
			this.ruleBool = false;
			this.ticketBool = false;
			// this.shareBool = true;
		},
		//弹窗立即分享
		popupFx(addTicket){
			this.ticketCount += addTicket; 
		},
		//满200，继续分享，前往商场
		fullTicket(direction){
			this.isStore = direction.isStore;
			this.isTicket = direction.isTicket;
			if(direction.isStore){
				this.ticketBool = false;
			}
			// this.ticketBool = true;
		},
		//分享好友，添加购物券
		FriendsShare(){
			this.shareBool = false;
			this.ticketBool = true;
			this.ticketCount += 10; 
			this.addTicket = 10;
		},
		//倒计时
		countDown() {
			let hms = {
				hours: Math.floor(this.maxtime / 60 / 60 % 24),
				minutes: Math.floor(this.maxtime / 60 % 60),
				seconds: Math.floor(this.maxtime  % 60)
			}
			this.hms = hms;
			// var msg = "距离结束还有"+ this.hours +"时"+ this.minutes + "分" + this.seconds + "秒";
			// console.log(this.hms);
		},
		// 设置定时器
		startTimer() {
			this.timer = setInterval(() => {
				this.countDown();
				//判断总的秒数是否小于=0 是则结束定时器
				if (this.maxtime <= 0) {
					clearInterval(this.timer);
					this.timer = null;
				}
				this.maxtime -= 1;
			}, 1000);
		},
		
	  },
	  components:{
		  rule,
		  ticket,
		  record,
		  cdList,
		  getTicket,
		  ATicket,
	  }
	}
</script>

<style lang="scss">
	.sti_box{
		position: relative;
		// background-image: url('https://image.soole.com.cn/sTIndex.png');
		// background-repeat: no-repeat;
		// background-size: 100%;
		margin-top: 46px;
		height: 100%;
		img{
			width: 100%;
		}
		
		.sti_box_content{
			padding: 22px 0;
			background-image: url('https://image.soole.com.cn/sTIndex.png');
			background-repeat: no-repeat;
			background-size: 100%;
		}
		.msg_txt,.sti_text,.plus_price{
			color: #FD2352;
			font-size: 12px;
		}
		
		
		.sti_module1{
			padding-bottom: 30px;
			.top_text{
				width: 80%;
				text-align: center;
				font-size: 17px;
				color: #fff;
				
				margin: 0 auto;
				p{
					margin-bottom: 18px;
				}
				span{
					font-size: 20px;
				}
			}
		}
		.sti_module2{
			// height: 166px;
			// padding-bottom: 32px;
			position: relative;
			.sti_content{
				width: 46%;
				display: flex;
				flex-direction: column;
				margin: 0 auto;
				text-align: center;
				height: 30%;
				font-size: 12px;
				height: 100px;
				.ski_count{
					display: flex;
					justify-content: flex-end;
					margin-bottom: 3px;
				}
				.ski_price{
					font-size: 42px;
					color:#FF2B3D;
					font-weight: 700;
					span{
						font-size: 15px;
					}
				}
				.ski_style{
					div{
						background-image: url('https://image.soole.com.cn/矩形.png');
						background-repeat: no-repeat;
						background-size: 100% 100%;
						font-size: 12px;
						color: #FF2B3D;
						padding: 2px 5px;
						margin-left: 10px;
					}
				}
				.ski_time{
					color: #FF7E1E;
					font-size: 12px;
				}
				
				p{
					color: #FF2B3D;
					margin: 5px 0;
				}
				.sti_timeout{
					display: flex;
					flex-direction: column;
					justify-content: center;
					font-size: 15px;
					color: #FF2B3D;
					height: 100%;
					font-weight: 700;
					div{
						margin-bottom: 7px;
					}
				}
			}
			
		}
		.sti_module3{
			.sti_content{
				text-align: center;
				padding-top: 24px;
				.sti_but{
					background-image: url('https://image.soole.com.cn/立即分享按钮.png');
					background-repeat: no-repeat;
					background-size: 100% 100%;
					width: 45%;
					margin: 0 auto;
					color: #FF1746;
					font-size: 22px;
					line-height: 68px;
				}
				.sti_text{
					color: #fff;
				}
			}
		}
}

.sssss{
	position: fixed;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 100%;
	    background-color: rgba(0,0,0,.7);
}

.sTIndex{
	background-image: url('https://image.soole.com.cn/4.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	
	//headr头
	.van-nav-bar{
		background:#fff;
		.van-nav-bar__title{
			color:#333333;
		}
		.van-icon{
			color:#333333;
		}
	}
	[class*=van-hairline]::after {
		border:none;
	}

	
	//活动规则
	.hdgz{
		background-color: #FFAB49;
		border-top-left-radius: 12px;
		border-bottom-left-radius: 12px;
		padding: 4px 8px 4px 12px;
		display: inline-block;
		color: #fff;
		position: absolute;
		top:16px;
		right: 0px;
		// position: fixed;
		// right: 0px;
		// top: 167px;
	}
	
	// 分享路径
	.fx_path{
		display: flex;
		justify-content:  space-around;
		margin-top: 32px;
		.fx_path_box{
			width: 25%;
			text-align: center;
		}
		.fx_path_img{
			width: 50px;
			height: 50px;
			margin: 0 auto;
			img{
				width: 100%;
				height: 100%;
			}
		}
		.fx_path_text{
			font-size: 12px;
			color: #141414;
		}
	}
	
	//
	.van-overlay{
		display: flex;
		align-items: center;
		justify-content: center;
		// position: relative;
		
		height: 100%;
	}
		
}		
		
	
</style>
